<template>
  <div class='ele-body ele-body-card'>
    <!-- 顶部卡片 -->
    <a-card
      :bordered='true'
      :body-style="{padding: '20px'}">
      <div class='ele-cell workplace-user-card'>
        <div class='ele-cell-content ele-cell'>
          <a-progress :width='70' type='circle' :percent='100' :format="() => '柜子'" />
          <div class='ele-cell-content'>
            <h4 class='ele-elip'>设备号：{{ data.recordId }}</h4>
            <div class='ele-elip ele-text-secondary'>
              <clock-circle-outlined />
              <em>{{ data.deviceTime }}</em>
            </div>
          </div>
        </div>
      </div>
    </a-card>

    <a-card
      :bordered='true'
      :body-style="{padding: '20px'}">
      <a-form
        ref='form'
        :model='form'
        :rules='rules'
        :label-col='{ md: { span: 10 }, sm: { span: 24 } }'
        :wrapper-col='{ md: { span: 14 }, sm: { span: 24 } }'
        @submit='save'
      >
        <a-alert message="1.电流超过设置的最大电流（连续几秒）说明刮倒牛或其他东西 2、电流瞬间低于正常值并且进度在设置的比如10%到90%内（说明刮粪绳子断了或者非正常停了） 3、设备停在进度（设置的范围）的非正常区域（设置的一定时间不动）并且还有电流通过报警（说明碰到故障）。 填写以下配置后请前往功能为[疾病预警->事件规则]中进行告警设置  " type="warning" />
        <a-form-item label='电机运行期间电流告警上限（精确到小数点1位）:' name='currentHigh'>
          <a-input-number v-model:value='form.currentHigh' style="width: 420px;" placeholder='请输入电机运行期间电流告警上限（精确到小数点1位）' allow-clear autocomplete='off' />
        </a-form-item>
        <a-form-item label='电流正常值（低于这个属于不正常）' name='currentNormal'>
          <a-input-number v-model:value='form.currentNormal' style="width: 420px;" placeholder='请输入电流正常值（精确到小数点1位）' allow-clear autocomplete='off' />
        </a-form-item>
        <a-form-item label='电流不正常的情况下且进度最小值:' name='abnormalCurrentPositionMin'>
          <a-input-number v-model:value='form.abnormalCurrentPositionMin' style="width: 420px;" placeholder='请输入电流不正常的情况下且进度最小值' allow-clear autocomplete='off' />
        </a-form-item>
        <a-form-item label='电流不正常的情况下且进度最大值:' name='abnormalCurrentPositionMax'>
          <a-input-number v-model:value='form.abnormalCurrentPositionMax' style="width: 420px;" placeholder='请输入电流不正常的情况下且进度最大值' allow-clear autocomplete='off' />
        </a-form-item>
        <a-form-item label='进度非正常区域的最小值:' name='abnormalPositionMin'>
          <a-input-number v-model:value='form.abnormalPositionMin' style="width: 420px;" placeholder='请输入非正常区域的最小值' allow-clear autocomplete='off' />
        </a-form-item>
        <a-form-item label='进度非正常区域的最大值:' name='abnormalPositionMax'>
          <a-input-number v-model:value='form.abnormalPositionMax' style="width: 420px;" placeholder='请输入非正常区域的最大值' allow-clear autocomplete='off' />
        </a-form-item>
        <a-form-item :wrapper-col='{ span: 12, offset: 5 }'>
          <a-button type='primary' html-type='submit' :loading='loading'>
            保存
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import {DeviceSlurryScraperWarnConfigApi} from "@/api/property/slurryscraper/DeviceSlurryScraperWarnConfigApi";
import { message } from 'ant-design-vue';
export default {
  name: 'DeviceSlurryscraperWarnConfig',
  components: {
  },
  props: {
    data: Object
  },
  async created() {
    await this.init();
  },
  data() {
    return {
      // 表单数据
      form: {},
      // 表单验证规则
      rules: {
        currentHigh: [{ required: true, message: '请输入电机运行期间电流告警上限（精确到小数点1位）', type: 'number', trigger: 'blur' }],
        currentNormal: [{ required: true, message: '请输入电流正常值，低于这个属于不正常', type: 'number', trigger: 'blur' }],
        abnormalCurrentPositionMin: [{ required: true, message: '请输入电流不正常的情况下且进度最小值', type: 'number', trigger: 'blur' }],
        abnormalCurrentPositionMax: [{ required: true, message: '请输入电流不正常的情况下且进度最大值', type: 'number', trigger: 'blur' }],
        abnormalPositionMin: [{ required: true, message: '请输入非正常区域的最小值', type: 'number', trigger: 'blur' }],
        abnormalPositionMax: [{ required: true, message: '请输入非正常区域的最大值', type: 'number', trigger: 'blur' }]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  methods: {
    async init() {
      let _conf = await DeviceSlurryScraperWarnConfigApi.detail({ 'recordId': this.data.recordId });
      if (_conf) {
        this.form = _conf;
        this.isUpdate = true;
      }
    },
    /**
     * 保存和编辑
     *
     * @author cancan
     * @date 2025/01/27 16:25
     */
    save() {
      let that = this;
      console.log(this.form);
      // 校验表单
      this.$refs.form.validate();

      // 修改加载框为正在加载
      this.loading = true;

      let result = null;
      this.form.recordId = this.data.recordId;
      // 执行编辑或修改
      if (this.isUpdate) {
        result = DeviceSlurryScraperWarnConfigApi.edit(this.form);
      } else {
        result = DeviceSlurryScraperWarnConfigApi.add(this.form);
      }
      result
        .then(result => {
          // 移除加载框
          that.loading = false;
          // 提示添加成功
          message.success(result.message);

          // 如果是新增，则form表单置空
          if (!that.isUpdate) {
            that.form = {};
          }
          that.init();
        })
        .catch(() => {
          that.loading = false;
        });
    }


  }
};
</script>
